<template>
  <div style="width: 100%; height: 100%">
    <div class="wholeall">
      <a class="topleftlogo">
        <img src="@/assets/images/pc_default_com_logo.png" />
      </a>
      <div class="main">
        <a class="logo-bim">
          常泰长江大桥CT-4标
          <br />智慧沙盘
        </a>
        <ul class="contents">
          <li class="ul_rf">
            <form class="login-form">
              <input
                type="text"
                v-model="username"
                class="userName"
                autocomplete="off"
                autofocus
                placeholder="请输入用户名"
              />
              <input
                type="password"
                v-model="password"
                class="passWord"
                autocomplete="off"
                placeholder="请输入用密码"
              />
              <p>
                <input
                  type="checkbox"
                  checked="true"
                  name="chkRememberUsername"
                />
                <label for="checkbox1">记住账号信息</label>

                <a href="#" class="forget">忘记密码>></a>
              </p>

              <button
                :disabled="disabledBtn"
                name="button"
                @click.prevent="handleLogin"
                value="login"
                :class="{ disabledbtn: disabledBtn }"
              >
                登录
              </button>
              <a href="#" class="phone-login">手机登录>></a>
            </form>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { setToken } from '@/utils/utils.js'
import config from '../../config'
import { login } from '@/api/user/login.js'
import { Message } from 'element-ui'
export default {
  data () {
    return {
      username: '',
      password: '',
      disabledBtn: false
    }
  },
  mounted () {
    localStorage.setItem('lastTimer', '')
  },
  methods: {
    handleLogin () {
      if (!this.username) {
        return Message('请输入用户名!')
      }

      if (!this.password) {
        return Message('请输入密码!')
      }

      this.disabledBtn = true
      const { params } = config.authInfo
      params.username = this.username
      params.password = this.password

      login(params).then((res) => {
        const data = res.data
        if (res.statusText === 'OK' && data.access_token) {
          // 登录成功
          Message({
            message: '登录成功!',
            type: 'success'
          })
          setToken(data.access_token)
          localStorage.setItem('lastTimer', Date.now())

          this.$router.push('/')
        } else {
          Message.error('token获取失败, 请刷新页面!')
        }
      }).catch((err) => {
        Message({
          message: '登录失败!' + err.message,
          type: 'error'
        })
      }).finally(() => {
        this.disabledBtn = false
      })
    }
  }
}
</script>

<style scoped>
.wholeall {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0px;
  position: relative;
  background-size: cover;
  z-index: 99;
  background-image: url("../../assets/images/cmImg/pc_CMBeamField_bg.png");
}

.topleftlogo {
  position: absolute;
  left: 10px;
  top: 10px;
}

.main {
  width: 64%;
  height: 66%;
  position: relative;
  top: 17%;
  left: 18%;
  background: #fff;
  box-shadow: 0 0 80px #151515;
  background-size: 100% 100%;
  background-image: url("../../assets/images/pc_default_com_center.png");
}

.main > a:nth-of-type(1) {
  font-size: 35px;
  color: #555;
  font-weight: bold;
  text-align: center;
}

.contents {
  display: flex;
  width: 100%;
  height: 100%;
}
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
.contents > li {
  height: 100%;
  float: left;
}

.ul_lf p {
  margin-top: 30%;
  margin-left: 100px;
  text-shadow: 1px 2px 0 #252525;
}
.ul_lf p b {
  font-size: 50px;
  color: #fff;
}
li.ul_rf {
  position: absolute;
  width: 27%;
  left: 4%;
}

.logo-bim {
  position: absolute;
  width: 30%;
  background: white;
  top: 15%;
  left: 4%;
}
.logo-bim > img {
  width: 100%;
  height: 100%;
}
.title {
  font-size: 22px;
  text-align: center;
  position: absolute;
  width: 100%;
  top: 26%;
  color: #024069;
  letter-spacing: 2px;
}
.login-form {
  width: 100%;
  margin: auto;
  position: absolute;
  top: 38%;
}
.login-form > input {
  height: 35px;
  margin-bottom: 30px;
  border: 1px solid #fff;
  border-radius: 30px;
  padding-left: 35px;
  width: calc(100% - 35px);
}
input.userName {
  background: #e7f1f9 url("../../assets/images/use.png") no-repeat left 7px
    center !important;
  background-size: 16px !important;
}
input.passWord {
  background: #e7f1f9 url("../../assets/images/pass.png") no-repeat left 7px
    center;
  background-size: 16px;
  margin-bottom: 15px;
}
.login-form > p {
  margin: 0;
}
.login-form input[type="checkbox"],
input[type="radio"] {
  width: 28px;
  height: 24px;
  margin: 0;
  padding: 0;
  opacity: 0;
  filter: "alpha(opacity=0)";
}
.login-form input[type="checkbox"]:checked + label {
  background: url("../../assets/images/icon2.png") no-repeat 0 -25px;
}
.login-form input[type="checkbox"] + label {
  display: inline-block;
  margin-left: -28px;
  padding-left: 28px;
  background: url("../../assets/images/icon2.png") no-repeat 0 0;
  line-height: 26px;
  opacity: 1;
}
.forget {
  display: inline-block;
  color: #f44336;
  margin-right: 10px;
  font-weight: 900;
  font-size: 13px;
  float: right;
}
.login-form > button {
  width: 100%;
  line-height: 35px;
  text-align: center;
  color: #fff;
  background: #0293f4;
  border: none;
  border-radius: 35px;
  margin: 20px 0 10px 0;
  box-shadow: 1px 2px 10px #6d92fb;
  font-size: 18px;
  letter-spacing: 10px;
  cursor: pointer;
}

.login-form > button:hover {
  background-color: #6d92fb;
  box-shadow: 1px 2px 10px #0293f4;
}
.login-form > button.disabledbtn {
  background-color: #aaa;
  cursor: not-allowed;
}
a.phone-login {
  display: inline-block;
  margin-right: 10px;
  color: #0293f4;
  font-weight: 900;
  font-size: 13px;
  float: right;
}
.forget:hover,
a.phone-login:hover {
  cursor: pointer;
}
</style>
